<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tab Demos</title>
	
	<link  href="../jquery.ui.tabs.css" rel="stylesheet" type="text/css"  class="view-source"/>
	<link  href="../../../../themes/default/style.css" rel="stylesheet" class="view-source">
	<script src="../../../../scripts/jquery.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/common.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/browserfix.js" type="text/javascript"  class="view-source"></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../../../scripts/plugins/jquery.ui.js" type="text/javascript" ></script>
		
	<script src="../jquery.ui.tabs.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">
	
	
	<style type="text/stylesheet">
		div{
			margin:0px;
			padding:0px;
		}
	</style>

<script  class="view-source noparse">	
	/*$( function(){
		var tab = $('#tabs-default').tabs( {
			tabs:[
				{label:'tab1',url:'http://www.g.cn',iframe:true},
				{label:'tab2',url:'http://www.baidu.com',iframe:true,id:"testId"},
				{label:'tab3 ',url:'http://www.sogou.com',iframe:true}
			] ,
			height:'100px',
			select: function(event, ui) { 
					//alert(ui.panel.id);
			}
		} ) ;
	   tab.select({id:'testId'}) ;
		tab.rename({id:"testId",label:"sdfasfd---"}) ;
	} );*/ 
</script>
</head>

<body>
	<div data-widget="tab" data-options="{select:function(event,ui){alert('选中时获取Tab ID: '+ui.panel.id);}}" class="ui-tabs">
		<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix">
			<li>
				<a href="#ui-tabs-1">tab1</a>
			</li>
			<li  class="ui-tabs-selected ui-state-active">
				<a href="#testId">sdfasfd---</a>
			</li>
			<li>
				<a href="#ui-tabs-2">tab3 </a>
			</li>
		</ul>
			
		<div id="ui-tabs-1" class="ui-tabs-panel" style="height: 100px; display: block; ">
			<iframe frameborder="0" height="100px" width="100%" src="http://www.g.cn"></iframe>
		</div>
		<div id="testId" class="ui-tabs-panel  ui-tabs-hide" style="height: 100px; display: none; ">
			<iframe frameborder="0" height="100px" width="100%" src="http://www.baidu.com"></iframe>
		</div>
		<div id="ui-tabs-2" class="ui-tabs-panel  ui-tabs-hide" style="height: 100px; display: block; ">
			<iframe frameborder="0" height="100px" width="100%" src="http://www.sogou.com"></iframe>
		</div>
	</div>
	
      		<script type="code-pretty" class="view-source inner-code noparse">
<div data-widget="tab" data-options="{select:function(event,ui){alert(ui.panel.id);}}" class="ui-tabs">
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix">
		<li>
			<a href="#ui-tabs-1">tab1</a>
		</li>
		<li  class="ui-tabs-selected ui-state-active">
			<a href="#testId">sdfasfd---</a>
		</li>
		<li>
			<a href="#ui-tabs-2">tab3 </a>
		</li>
	</ul>
		
	<div id="ui-tabs-1" class="ui-tabs-panel" style="height: 100px; display: block; ">
		<iframe frameborder="0" height="100px" width="100%" src="http://www.g.cn"></iframe>
	</div>
	<div id="testId" class="ui-tabs-panel  ui-tabs-hide" style="height: 100px; display: none; ">
		<iframe frameborder="0" height="100px" width="100%" src="http://www.baidu.com"></iframe>
	</div>
	<div id="ui-tabs-2" class="ui-tabs-panel  ui-tabs-hide" style="height: 100px; display: block; ">
		<iframe frameborder="0" height="100px" width="100%" src="http://www.sogou.com"></iframe>
	</div>
</div>
      		</script>
      	</div>
</body>
</html>